Source: ui/ParamView.jsx

import React, { Component } from 'react';
import PropTypes from "prop-types";
import { withStyles } from '@material-ui/core/styles';
import {
    Typography, FormControl, Select, MenuItem, Link,
    InputLabel, TextField, Fab, FormControlLabel, Checkbox,
    Button, Switch, Tooltip
} from "@material-ui/core";
import {Slider} from '@material-ui/lab';
import "./ParamView.css";
import {objectiveTypes, loadStates} from '../LucidJS/src/optvis/renderer.js';
import {getImgDataFromFile} from '../DrawingHelper.js';
import {ttInputParams, ttObjectiveParams} from '../strings'


const objectives = Object.entries(
  objectiveTypes).map((keyAndValue) => keyAndValue[1]);

  /**
   * Component that contains parameter settings.
   */
class ParamView extends Component {

  constructor(props){
    super(props);
  }

  render(){
    const uploadButton = (<span>Upload<input
      type="file"
      accept="image/*"
      style={{ display: "none" }}
      onChange={(e) => {
        const files = e.target.files;
        const imgFile = files[0];
        getImgDataFromFile(imgFile, (imgData) => {
          this.props.handleInputChange({baseImage: imgData});
          console.log(imgData);
        });
      }}
    /></span>);

    return (
    <div>
      <div className="paramContainer">
        <div className="paramColumn">
          <Tooltip title={this.props.showHelp ? ttInputParams : ''}>
            <div className="titleContainer" style={{display: "flex", flexFlow: "row"}}>
              <Button style={{"paddingTop": "2px",
              "paddingBottom": "2px",
            "marginRight": "5px",
          flexGrow: 0}}
              variant='contained'
              color="primary"
              disabled={this.props.loadStatus === loadStates.OPTIMIZING}
              onClick={() => {
                this.props.onApplyInputParams();
              }}
              >Apply</Button>
              <h4 className="titleText" style={{flexGrow: 2}}>Input parameters</h4>
            </div>
          </Tooltip>
          <div id="inputParams" className="paramSettingsContainer">
            <div className="paramSettingsColumn">
              <div className="paramGroup">
                <Typography className="sliderLabel">Input size: {
                  this.props.inputSize}</Typography>
                <Slider
                  className="slider"
                  min={16}
                  max={512}
                  step={16}
                  value={this.props.inputSize}
                  aria-labelledby="label"
                  onChange={(e, v) => {
                      this.props.handleInputChange({inputSize: v});
                    }
                  }
                />
              </div>
              <div className="splitParamGroup">
                <Typography className="wholeWidth">Decorrelate</Typography>
                <Switch className="wholeWidth"
                checked={this.props.decorrelate}
                onChange={(e, v) => {
                    this.props.handleInputChange({decorrelate: v});
                  }
                }></Switch>
              </div>
            </div>
            <div className="paramSettingsColumn">
              <div className="paramGroup">
                <Typography
                className="sliderLabel">Lapl. pyramid layers: {
                  this.props.pyramidLayers}</Typography>
                <Slider
                  className="slider"
                  min={1}
                  max={9}
                  step={1}
                  value={this.props.pyramidLayers}
                  aria-labelledby="label"
                  onChange={(e, v) => {
                    this.props.handleInputChange({pyramidLayers: v});
                  }}
                />
              </div>
              <div className="splitParamGroup">
                <Typography className="wholeWidth">Base Image</Typography>
                <Button className="wholeWidth"
                variant='contained'
                component={this.props.baseImage ? 'button' : 'label'}
                onClick={(e) => {
                  if(this.props.baseImage) {
                    this.props.handleInputChange({baseImage: null});
                  }
                }}>{this.props.baseImage ? 'Remove' : uploadButton }
                </Button>
              </div>
            </div>
          </div>
        </div>
        <div className="paramColumn">
          <Tooltip title={this.props.showHelp ? ttObjectiveParams : ''}>
            <div className="titleContainer">
              <h4 className="titleText">Optimization parameters</h4>
            </div>
          </Tooltip>
          <div id="optimParams" className="paramSettingsContainer">
            <div className="paramSettingsColumn">
              <FormControl className="menu">
                <InputLabel>Objective type</InputLabel>
                <Select
                value={this.props.objectiveType}
                error={false}
                onChange={(event) => {
                  this.props.changedObjective(event.target.value);
                }}>
                  {objectives.map((objective, index) => {
                      return <MenuItem value={objective}>{objective}</MenuItem>
                        })}
                </Select>
              </FormControl>
              <div className="splitParamGroup">
                <Typography className="wholeWidth">Negative</Typography>
                <Switch className="wholeWidth"
                checked={this.props.negative}
                onChange={(e,v) =>
                  this.props.changedNegative(v)}></Switch>
              </div>
              <FormControl className="menu">
                <InputLabel>Select class</InputLabel>
                <Select
                value={this.props.classInd}
                error={false}
                onChange={(event) => {
                  this.props.changedClassInd(event.target.value);
                }}>
                  {this.props.classList.map((className, index) => {
                      return <MenuItem value={index}>
                      {index + ": " + className}
                      </MenuItem>
                        })}
                </Select>
              </FormControl>
            </div>
            <div className="paramSettingsColumn">
              <div className="paramGroup">
                <Typography
                className="sliderLabel">Jitter: {
                  this.props.jitter}</Typography>
                <Slider
                  className="slider"
                  min={0}
                  max={12}
                  step={1}
                  value={this.props.jitter}
                  aria-labelledby="label"
                  onChange={(e, v) =>
                    this.props.changedJitter(v)}
                />
              </div>
              <div className="paramGroup">
                <Typography
                className="sliderLabel">Learning Rate: {
                  this.props.learningRates[
                    this.props.learningRate]}</Typography>
                <Slider
                  className="slider"
                  min={0}
                  max={10}
                  step={1}
                  value={this.props.learningRate}
                  aria-labelledby="label"
                  onChange={(e, v) =>
                    this.props.changedLearningRate(v)
                  }
                />
              </div>
              <div  style={{visibility: 'hidden'}}
              className="paramGroup">
                <Typography
                className="sliderLabel">Pyr. Layer Weight: {
                  this.props.pyrLayerWeight}</Typography>
                <Slider
                  className="slider"
                  min={0}
                  max={1}
                  value={this.props.pyrLayerWeight}
                  aria-labelledby="label"
                  onChange={(e, v) =>
                    this.props.changedPyrLayerWeight(v)
                  }
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);
  }

}

export default ParamView;